<template>
  <view class="box">
    <view class="box_image">
    </view>

    <view class="container">
      <view class="container_user">
        <view class="container_user_top">
          <view class="container_user_top_left">
            <view class="left_img">
              <image :src="userInfo.avatar" mode="aspectFill"></image>
            </view>
            <view class="left_title">
              <h1>{{userInfo.realName}}</h1>
              <text>{{userInfo.phone}}</text>
            </view>
          </view>
          <view class="container_user_top_right" @click="addShareImg">
            <image src="/static/images/mine/qrcode.png" mode="aspectFill"></image>
          </view>
        </view>
        <view class="container_user_bottom">
          <view class="container_user_bottom_withdraw">
            <view class="withdraw_left">
              <text>平台总收益</text>
              <h1>{{distribution.avaibleAmount}}</h1>
            </view>
            <view class="withdraw_right"
              @click="navTo('/subpkg/withdraw/withdraw?amount=' + distribution.avaibleAmount)">
              提现
            </view>
          </view>
          <view class="container_user_bottom_money">
            <view class="money_box">
              <text>可提现</text>
              <h1>{{distribution.avaibleAmount}}</h1>
            </view>
            <!-- <view class="money_box">
              <text>已提现</text>
              <h1>16840.00</h1>
            </view> -->
            <view class="money_box">
              <text>提现中</text>
              <h1>{{distribution.frozenAmount}}</h1>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="container_share">
        <view class="container_share_title">
          你可以分享以下内容
        </view>
        <view class="container_share_box">
          <view class="container_share_box_left">
            <image src="../../static/everyday/disinfect.png" mode="aspectFill"></image>
          </view>
          <view class="container_share_box_right">
            <view class="title_top">
              <h1>猫咪博物馆门票精品特价</h1>
            </view>
            <view class="title_bottom">
              <view class="title_bottom_left">
                <h1>¥39.00</h1>
                <text>¥42.00</text>
              </view>
              <view class="title_bottom_right" @click="shareShow = true">
                <image src="/static/share1.png" mode="widthFix"></image>
                <text>返¥5.58</text>
              </view>
            </view>
          </view>
        </view>
        <view class="container_share_box">
          <view class="container_share_box_left">
            <image src="../../static/everyday/disinfect.png" mode="aspectFill"></image>
          </view>
          <view class="container_share_box_right">
            <view class="title_top">
              <h1>猫咪博物馆门票精品特价</h1>
            </view>
            <view class="title_bottom">
              <view class="title_bottom_left">
                <h1>¥39.00</h1>
                <text>¥42.00</text>
              </view>
              <view class="title_bottom_right" @click="shareShow = true">
                <image src="/static/share1.png" mode="widthFix"></image>
                <text>返¥5.58</text>
              </view>
            </view>
          </view>
       </view>
      </view> -->
    </view>

    <!-- 分享弹框 -->
    <view class="shareShow">
      <van-popup :show="showShareImg" round @close="showShareImg =false">
        <view class="popup_image">
          <image :src="canvasToTempFilePathImage" mode="widthFix"></image>
        </view>
        <view class="popup_button" @click="saveShareImg(canvasToTempFilePathImage)">
          <button type="default">保存图片，分享好友</button>
        </view>
      </van-popup>
    </view>
    <view class="applyshow_erwei">
      <canvas class="applyshow_erwei_img"
        :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px'  , position: fixed  , top:'-9999rpx'}"
        canvas-id="memberCode"></canvas>
    </view>

    <canvas canvas-id="myCanvas" style="width: 690px;height:1200px; position: fixed ; top:-9999rpx"></canvas>


    <van-popup :show="shareShow" round position="bottom" custom-style="height: 25%" @close="shareShow = false">
      <view class="share_Input">
        <button type="default" open-type="share">
          <image src="/static/images/weixin.png" mode="aspectFill"></image>
          <text>发送给好友</text>
        </button>
        <button type="default" @click="oncircleShow">
          <image src="/static/images/pyquan.png" mode="aspectFill"></image>
          <text>分享到朋友圈</text>
        </button>
      </view>
    </van-popup>

    <view class="circleType">
      <van-popup :show="circleShow" custom-style="height: 10%;width : 40%" @close="circleShowClose">
        <view class="share_Input">
          点击右上角选择可分享朋友圈
        </view>
        <view class="minImage"></view>
      </van-popup>
    </view>


    <!-- <view class="" @click="add">
      12356465
    </view> -->
  </view>
</template>

<script>
  const qrCode = require('@/libs/weapp-qrcode.js');
  import {
    mapGetters
  } from 'vuex'

  import {
    getDistribution,
    getQrcode
  } from "@/api/attestation.js"

  export default {
    data() {
      return {
        showShareImg: false,
        canvasToTempFilePathImage: '',
        canvasqrCode: '',
        qrCode1: '',
        bgi:'',
        // 分享
        shareShow: false,
        // 朋友圈
        circleShow: false,
        previewImage: '',
        distribution: [],
        RecordCategoryList: {
          sex: '0',
          neuter: '0',
          productName: '哈哈',
          token: '123'
        },
        headUrl: '',
        showShare: false,
        ratio: 1,
        ctx: null, // 创建canvas对象
        canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
        openStatus: true, // 声明一个全局变量判断是否授权保存到相册
        qrcodeSize: uni.upx2px(260),
      };
    },
    computed: {
      ...mapGetters('m_user', ['curretnStore', 'userInfo']),
    },
    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: "奇宠日记",
        path: '/pages/tabbar/index/index',
        imageUrl: 'http://447331-dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210517/f648cf503acdd3cef9e4d8db80232371.jpg'
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: "奇宠日记",
        path: '/pages/tabbar/index/index',
        imageUrl: 'http://447331-dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210517/f648cf503acdd3cef9e4d8db80232371.jpg'
      };
    },
    onLoad() {
      console.log(this.userInfo)
      this.getDistributionList()
      this.getQrcodeList()
    },
    onShow() {
      // this.getDistributionList()
      wx.removeStorageSync('bank');
      this.getDistributionList()
    },
    // #endif
    methods: {
      // add() {
      //   const params = {
      //     userId: '123456',
      //     shopId: this.curretnStore.id,
      //     type: 2 //0购卡 1 会员卡使用 2 门票
      //   }
      //   this.makeMemberCode(JSON.stringify(params))
      // },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      // ongetIdentity() {

      // },
      //海报文字超出显示省略号
      canvasWraptitleText(canvas, text, x, y, maxWidth, lineHeight, maxRowNum) {
        if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
          return;
        }
        canvas.font = 'normal 36px sans-serif'; //绘制文字的字号和大小
        // 字符分隔为数组
        let arrText = text.split('');
        let line = '';
        let rowNum = 1
        for (let n = 0; n < arrText.length; n++) {
          let testLine = line + arrText[n];
          let metrics = canvas.measureText(testLine);
          let testWidth = metrics.width;
          if (testWidth > maxWidth && n > 0) {
            if (rowNum >= maxRowNum) {
              let arrLine = testLine.split('')
              // arrLine.splice(-2)
              let newTestLine = arrLine.join("")
              newTestLine += "..."
              canvas.fillText(newTestLine, x, y);
              return
            }
            canvas.fillText(line, x, y);
            line = arrText[n];
            y += lineHeight;
            rowNum += 1
          } else {
            line = testLine;
          }
        }
        canvas.fillText(line, x, y);
      },
      addShareImg() {
        let self = this;
        // console.log(self.canvasqrCode)
        // 二维码
        let codeUrl = this.qrCode1
        let bgi = this.bgi
        console.log(codeUrl)
        if (!self.ctx) {
          uni.showLoading({
            title: '生成中...'
          });

          Promise.all([codeUrl]).then(function(result) {
            const ctx = uni.createCanvasContext('myCanvas');

            let codeurl_width = 160, //绘制的头像宽度
              codeurl_heigth = 160, //绘制的头像高度
              codeurl_x = 480, //绘制的头像在画布上的位置
              codeurl_y = 710; //绘制的头像在画布上的位置

            ctx.drawImage(bgi, -3, 0, 700, 1200); // 背景图片需要本地

            ctx.save()
            ctx.beginPath(); //开始绘制

            ctx.drawImage(codeUrl, codeurl_x, codeurl_y, codeurl_width, codeurl_heigth);
            // ctx.drawImage(codeUrl, 460, 353, 40, 40);


            // 移动画笔至坐标 x20 y20 的位置
            // ctx.moveTo(140, 438);
            ctx.strokeStyle = "#3D3D3D";
            ctx.font = 'normal 36px sans-serif';
            self.canvasWraptitleText(ctx, self.userInfo.tenantName, 485, 920)

            ctx.stroke();
            ctx.closePath();

            ctx.draw(false, function() {
              // canvas画布转成图片并返回图片地址
              uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function(res) {
                  self.canvasToTempFilePathImage = res.tempFilePath;
                  // console.log(123)
                  self.showShareImg = true;
                  // console.log(res.tempFilePath, 'canvasToTempFilePath');
                  uni.showToast({
                    title: '绘制成功'
                  });
                },
                fail: function() {
                  uni.showToast({
                    title: '绘制失败'
                  });
                },
                complete: function() {
                  uni.hideLoading();
                  uni.hideToast();
                }
              });
            });
          });
        }
      },
      getDistributionList() {
        getDistribution().then(res => {
          this.distribution = res.data.memberAmount
        })
      },
      // 保存到系统相册
      saveShareImg: function(canvasToTempFilePath) {
        let self = this;
        // 数据埋点点击保存海报
        self.saveId = '保存学情海报';
        // 获取用户是否开启用户授权相册
        if (!self.openStatus) {
          wx.openSetting({
            success: result => {
              if (result) {
                if (result.authSetting['scope.writePhotosAlbum'] === true) {
                  self.openStatus = true;
                  wx.saveImageToPhotosAlbum({
                    filePath: canvasToTempFilePath,
                    success() {
                      self.showShareImg = false;
                      wx.showToast({
                        title: '图片保存成功，快去分享到朋友圈吧~',
                        icon: 'none',
                        duration: 2000
                      });
                    },
                    fail() {
                      wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                      });
                    }
                  });
                }
              }
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          wx.getSetting({
            success(res) {
              // 如果没有则获取授权
              if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                    self.openStatus = true;
                    wx.saveImageToPhotosAlbum({
                      filePath: canvasToTempFilePath,
                      success() {
                        self.showShareImg = false;
                        wx.showToast({
                          title: '图片保存成功，快去分享到朋友圈吧~',
                          icon: 'none',
                          duration: 2000
                        });
                      },
                      fail() {
                        wx.showToast({
                          title: '保存失败',
                          icon: 'none'
                        });
                      }
                    });
                  },
                  fail() {
                    // 如果用户拒绝过或没有授权，则再次打开授权窗口
                    self.openStatus = false;
                    console.log('请设置允许访问相册');
                    wx.showToast({
                      title: '请设置允许访问相册',
                      icon: 'none'
                    });
                  }
                });
              } else {
                // 有则直接保存
                self.openStatus = true;
                wx.saveImageToPhotosAlbum({
                  filePath: canvasToTempFilePath,
                  success() {
                    self.showShareImg = false;
                    wx.showToast({
                      title: '图片保存成功，快去分享到朋友圈吧~',
                      icon: 'none',
                      duration: 2000
                    });
                  },
                  fail() {
                    wx.showToast({
                      title: '保存失败',
                      icon: 'none'
                    });
                  }
                });
              }
            },
            fail(err) {
              console.log(err);
            }
          });
        }
      },

      getQrcodeList() {
        const query = {
          associatedId: 10,
          associatedType: 0,
        }
        let self = this
        getQrcode(query).then(res => {
          // console.log(this.canvasqrCode)
          // this.ongetIdentity()
          uni.getImageInfo({
            src: res.data,
            success: function(res) {
              // console.log(res)
              // console.log(res + 123);
              self.qrCode1 = res.path
              // console.log(self.qrCode1)
            },
            fail: function(res) {
              // console.log(res)

            }
          });
          uni.getImageInfo({
            src: 'https://qichong-1256206693.cos.ap-nanjing.myqcloud.com/6421621567624_.pic_hd.jpg',
            success: function(res) {
              console.log(res)
              // console.log(res + 123);
              self.bgi = res.path
              // console.log(self.qrCode1)
            },
            fail: function(res) {
              // console.log(res)
          
            }
          });
        })
        // console.log(this.canvasqrCode)
      },
      onShareClose() {
        this.showShareImg = false
      },
      // 保存到系统相册

      shareShowClose() {
        this.shareShow = false
      },
      oncircleShow() {
        this.shareShow = false
        this.circleShow = true
      },
      circleShowClose() {
        this.circleShow = false
      },
    },
  }
</script>

<style lang="scss">
  .box {
    position: relative;

    .box_image {
      position: absolute;
      top: 0;
      z-index: -1;
      width: 750rpx;
      height: 518rpx;
      background: linear-gradient(180deg, rgba(253, 211, 56, 1) 0%, rgba(253, 211, 56, 1) 100%);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 100rpx;
      border-bottom-left-radius: 100rpx;
    }

    .applyshow_erwei {
      position: fixed;
      top: -9999rpx;

      // height: 288rpx;
      .applyshow_erwei_img {}
    }

    .container {
      padding: 39rpx 30rpx;

      .container_user {
        height: 567rpx;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
        border-radius: 30px;

        .container_user_top {
          padding: 52rpx 50rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px dashed rgba(61, 61, 61, 0.08);

          .container_user_top_left {
            display: flex;
            align-items: center;

            .left_img {
              margin-right: 30rpx;

              image {
                width: 142rpx;
                height: 142rpx;
                border-radius: 50%;
              }
            }

            .left_title {
              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 40rpx;
                margin-bottom: 20rpx;
              }

              text {
                color: rgba(61, 61, 61, 0.6);
                font-size: 32rpx;
              }
            }
          }

          .container_user_top_right {
            image {
              width: 50rpx;
              height: 50rpx;
            }
          }
        }

        .container_user_bottom {
          height: 320rpx;
          padding: 25rpx 50rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .container_user_bottom_withdraw {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .withdraw_left {
              text {
                color: rgba(61, 61, 61, 0.6);
                font-size: 28rpx;
              }

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 48rpx;
                font-weight: bold;
                margin-top: 8rpx;
              }
            }

            .withdraw_right {
              padding: 8rpx 25rpx;
              background-color: rgba(253, 211, 56, 1);
              border-radius: 26.5rpx;
              font-weight: 500;
            }
          }

          .container_user_bottom_money {
            display: flex;
            justify-content: space-between;

            .money_box {
              text {
                color: rgba(61, 61, 61, 0.6);
                font-size: 28rpx;
              }

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 36rpx;
                margin-top: 8rpx;
                font-weight: 500;
              }
            }
          }
        }
      }

      .container_share {
        .container_share_title {
          color: rgba(61, 61, 61, 1);
          font-size: 36rpx;
          margin: 47rpx 0;
          font-weight: bold;
        }

        .container_share_box {
          display: flex;
          margin-bottom: 50rpx;

          .container_share_box_left {
            width: 24%;
            margin-right: 27rpx;

            image {
              width: 150rpx;
              height: 150rpx;
              border-radius: 10rpx;
            }
          }

          .container_share_box_right {
            width: 74%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10rpx 0;
            box-sizing: border-box;

            .title_top {
              width: 85%;

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 34rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .title_bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .title_bottom_left {
                display: flex;
                align-items: flex-end;

                h1 {
                  color: rgba(255, 87, 51, 1);
                  font-size: 36rpx;
                  margin-right: 15rpx;
                  font-weight: 500;
                }

                text {
                  color: rgba(61, 61, 61, 0.5);
                  font-size: 24rpx;
                  text-decoration: line-through;
                }
              }

              .title_bottom_right {
                display: flex;
                align-items: center;
                padding: 7rpx 22rpx;
                background-color: rgba(253, 211, 56, 1);
                border-radius: 26.5rpx;
                color: rgba(61, 61, 61, 1);
                font-size: 26rpx;

                image {
                  width: 26rpx;
                  height: 26rpx;
                  margin-right: 10rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .shareShow {

    /deep/ .van-pupop,
    .van-popup--center {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60rpx 85rpx !important;
    }

    /deep/ .popup_image {
      width: 386rpx;
      height: 686rpx;
      margin-top: 26rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    /deep/ .popup_button {
      width: 433rpx;
      height: 74rpx;

      button {
        width: 100%;
        height: 100%;
        line-height: 74rpx;
        border-radius: 226rpx;
        background-color: #FDD338;
        color: rgba(61, 61, 61, 1);
        font-size: 32rpx;
        margin-top: 27rpx;
        font-weight: bold;
      }
    }
  }

  .share_Input {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fff;
      padding: 0 !important;
      // border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 110rpx;
        height: 110rpx;
      }

      text {
        font-size: 32rpx;
      }
    }
  }

  .circleType {
    /deep/ .van-popup--center {
      position: fixed !important;
      top: 7% !important;
      left: 77% !important;
    }

    /deep/ .van-popup {
      border-radius: 6rpx;
    }

    .share_Input {
      font-size: 26rpx;
      padding: 0 24rpx;
      line-height: 50rpx;
    }

    .minImage {
      position: absolute;
      right: 96rpx;
      top: -38rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: transparent transparent #fff transparent;
    }
  }
</style>
